<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    {css file="bootstrap" /}
    {js file="jquery" /}
    {js file="jquery.validate" /}
    {js file="__ROOT__/public/js/jqueryValidate/jquery.metadata.js" /}
    <style>
        .input-min{
            width: 23px;
        }
        legend{
            margin-bottom: 0px;
        }
        .linkage_set{
            display: none;
        }
        .control-group{
            border-bottom: 1px #DDD dashed;
            padding-bottom: 4px;
        }
        table th{
            font-weight:normal;
            text-align:left;
        }
        .control-label{
            font-size:13px;
            color:#333;
        }
    </style>
</head>
<body>
    <div id="add_field">
        <form method="post" validate="true" action="__METH__" id="field_validate" class="form-horizontal">
            <fieldset>
                <legend>增加字段</legend>
                <div class="control-group">
                    <label class="control-label" for="field_name">字段名称</label>
                    <div class="controls">
                        <input type="text" id="field_name" name="field_name" value="" validate="{required:true,regexp:/^[a-z]\w+$/,messages:'请输入正确的格式'}" />
                        <p class="help-inline"></p>
                        <p class="help-block">
                            使用字母、数字、下划线，作为表字段名,并且仅能字母开头，不以下划线结尾。至少两位。
                        </p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="title">字段别名</label>
                    <div class="controls">
                        <input type="text" name="title" id="title" value="" />
                        <p class="help-block">
                            发布内容时的字段提示文字,例如：职位名称
                        </p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">字段类型</label>
                    <div class="controls">
                        <select name="field_type" id="field_type" validate="{required:true}">
                            <option value="">请选择</option>
                            {foreach from="$data.field_type" value="$type"}
                            <option value="{$type.name}">{$type.title}</option>
                            {/foreach}
                        </select>
                        <p class="help-block">字段在数据库中的存储类型和前台显示样式<br />例如：input或textarea</p>
                    </div>
                </div>
                <!--文本域参数-->
                <div class="control-group textarea_var_set" style="display:none">
                    <label for="" class="control-label">默认值</label>
                    <div class="controls">
                        <textarea class="input-xlarge" name="default_val" cols="35" rows="4"></textarea>
                    </div>
                </div>
                <div class="control-group switch_set_no" id="field_length">
                    <label class="control-label" for="length" value="10">字段长度</label>
                    <div class="controls">
                        <input type="text" name="length" id="length" validate="{required:true,regexp:/^\d+,?\d+$/}" class="input-mini" value="" />
                        <p class="help-block">
                            DECIMAL和FLOAT类型可以用,号隔开
                        </p>
                    </div>
                </div>
                <!--/文本域参数-->
                <!--文件上传参数-->
               <!--  <div class="control-group file_upload_set" style="display:none">
                    <label for="" class="control-label">文件上传参数</label>
                    <div class="controls">
                        <label class="radio inline"><input type="radio" disabled="disabled" checked="checked" name="setting[type]" value="radio" class="radio" />普通上传框</label>
                        <label class="radio inline"><input type="radio" disabled="disabled" name="setting[type]" value="checkbox" class="radio" />上传插件</label>&nbsp;&nbsp;&nbsp;
                        <p class="help-inline">普通上传框只生成html代码</p>
                    </div>
                    <div class="controls">
                        <label>允许上传的类型：<input type="text" disabled name="setting[allow]" value="gif|jpg" /></label>
                        允许上传的数量：<input type="text" disabled class="input-min" name="setting[nums]" />
                        <div class="input-append">允许上传大小：<input type="text" disabled name="setting[max_size]" class="input-mini" value=""><span class="add-on">KB</span>
                        </div>
                    </div>
                </div> -->
                <!--/文件上传参数-->
                <!--选项参数-->
<div class="control-group switch_set" style="display:none;">
<label for="" class="control-label">选项类型</label>
<div class="controls">
    <label class="radio inline"><input type="radio" disabled="disabled" checked="checked" name="setting[type]" value="radio" class="radio" />单选</label>
    <label class="radio inline"><input type="radio" disabled="disabled" name="setting[type]" value="checkbox" class="radio" />复选框</label>
    <label class="radio inline"><input type="radio" disabled="disabled" name="setting[type]" value="option" class="radio" />下拉列表</label>
    <table>
        <tr>
            <td>存储类型：</td>
            <td>
                <select name="setting[fieldtype]" id="switch-field" class="input-medium" disabled="disabled">
                    <option value="">请选择</option>
                    <option value="VARCHAR">字符 VARCHAR</option>
                    <option value="TINYINT">整数 TINYINT(3)</option>
                    <option value="SMALLINT">整数 SMALLINT(5)</option>
                    <option value="MEDIUMINT">整数 MEDIUMINT(8)</option>
                    <option value="INT">整数 INT(10)</option>
                </select>
                <span class="switch-varchar-leng hide">
                        <input type="text" name="length" disabled="disabled" class="input-mini" value="" />
                </span>
                <span class="hide" id="switch-unsigned">
                    <label title="即没有符号" class="radio inline">
                        <input type="radio" value="UNSIGNED" name="setting[unsigned]" checked disabled="disabled" validate="{required:true}" />正整数</label>
                    <label class="radio inline"><input type="radio" name="setting[unsigned]" disabled="disabled" value=""/>整数</label>
                </span>
            </td>
        </tr>
        <tr>
            <td>选项列表</td>
            <td><textarea class="input-xlarge" id="data" name="data" cols="35" rows="4">1=选项名称1
2=选项名称2</textarea><p class="helo-block">每行一个选项。格式：选项值=选项名称</p></td>
        </tr>
        <tr>
            <td><label for="default_val">默认值</label></td>
            <td><input class="input-mini" id="default_val" value="1" name="default_val"><p class="help-inline">输入数据中的选项值</p></td>
        </tr>
    </table>
    <p class="help-block"></p>
</div>
</div>
                <!--/选项参数-->
                <div class="control-group editor_set" id="editor_style_area" style="display:none;">
                    <label class="control-label">编辑器风格</label>
                    <div class="controls">
                        <?php $style=1;?>
                        {foreach from="$data.view_array_index.editor_style" value="$editor_style" key="$editor_style_key"}
                        <label class="radio inline"><input validate="{required:true}" type="radio" name="editor_style" disabled="disabled" value="{$editor_style_key}" {if value="$style==1"}checked{/if} />{$editor_style}</label>
                        <?php $style++;?>
                        {/foreach}
                        <p class="help-block"></p>
                    </div>
                    <label class="control-label">编辑器默认值</label>
                    <div class="controls">
                        <textarea class="input-xlarge" name="default_val" cols="35" rows="4"></textarea><p class="helo-block"></p>
                    </div>
                </div>
                <div class="control-group switch_set_no textarea_var_set_no editor_set_no">
                    <label class="control-label" for="default_val">字段默认值</label>
                    <div class="controls">
                        <input class="input-large" id="default_val" name="default_val" />
                    </div>
                </div>
                <div class="control-group linkage_set">
                    <label class="control-label" for="lcgid">联动数据类别</label>
                    <div class="controls">
                        <select name="lcgid" class="input-medium" id="lcgid" disabled="disabled" validate="{required:true}" >
                            <option value="">请选择</option>
                            <option value="city">地区</option>
                            {foreach from="$data.linkage_cate" value="$cate"}
                            <option value="{$cate.lcgid}">{$cate.cate_title}</option>
                            {/foreach}
                        </select>
                        <p class="help-inline">
                            联动数据的数据来源，地区、行业、职位类别……
                        </p>
                    </div>
                    <label class="control-label">联动数据风格</label>
                    <div class="controls">
                        <?php $style=1;?>
                        {foreach from="$data.view_array_index.linkage_style" value="$linkage_style" key="$linkage_style_key"}
                        <label class="radio inline"><input validate="{required:true}" type="radio" name="linkage_style" id="linkage_style" value="{$linkage_style_key}" {if value="$style==1"}checked{/if} />{$linkage_style}</label>
                        <?php $style++;?>
                        {/foreach}
                        <p class="help-block"></p>
                    </div>
                    <label class="control-label" for="title">附属字段</label>
                    <div class="controls">
                        <style type="text/css">
                            .attached-field{
                                margin-bottom: 10px;
                                width: 185px;
                            }
                            .remove-attached{
                                margin-top:4px;
                            }
                        </style>
                        <div class="attached-field">字段名称：<input type="text" name="attached[]" class="input-small" value="" />
                        </div>
                        <span id="add-attached" style="display:block;width:100px;padding: 2px 5px;margin-left:50px;margin-top:10px;"><a href="" class=""><i class="icon-plus-sign"></i>增加一项</a></span>
                        <script type="text/javascript">
                            $("#add-attached").click(function(){
                                if($(".remove-attached").length<2){
                                    $(this).before('<div class="attached-field">字段名称：<input type="text" name="attached[]" class="input-small" value="" /><a class="remove-attached close">&times;</a></div>');
                                }else{
                                    alert('一般不会超过3项吧');
                                }
                                return false;
                            });
                            $(".remove-attached").live('click',(function(){
                                $(this).parent().remove();
                                return false;
                            }));
                        </script>
                        <p class="help-block">
                            例如：当省为联动类型时，市、县字段可以不是联动类型，作为其附属字段即可
                        </p>
                    </div>
                    <label class="control-label"></label>
                    <div class="controls">
                        <label class="checkbox inline">
                            <input type="checkbox" name="setting[checkbox]" value="1" disabled />允许多选
                        </label>
                        <p class="help-inline"></p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="rule-required">是否必填</label>
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" name="rule[required]" id="rule-required" value="true" />必须填写
                        </label>
                        <p class="help-block">即创建字段时的NOT NULL和前台是否必须填写该字段</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">字段验证</label>
                    <div class="controls" style="width:320px;">
                        <label class="checkbox inline" title="邮箱"><input type="checkbox" name="rule[email]" value="true" />邮箱</label>
                        <label class="checkbox inline" title="网址"><input type="checkbox" name="rule[url]" value="true" />网址</label>
                        <label class="checkbox inline" title="日期"><input type="checkbox" name="rule[date]" value="true" />日期</label>
                        <label class="checkbox inline" title="数字"><input type="checkbox" name="rule[number]" value="true" />数字</label>
                        <label class="checkbox inline" title="整数"><input type="checkbox" name="rule[digits]" value="true" />整数</label>
                        <label class="checkbox inline" title="IPV4"><input type="checkbox" name="rule[ipv4]" value="true" />IPV4</label>
                    </div>
                    <div class="controls">
                        <table>
                            <tr>
                                <th>最小长度：</th>
                                <td><input type="text" name="rule[minlength]" class="input-mini" value="" /></td>
                                <th>最大长度：</th>
                                <td><input type="text" name="rule[maxlength]" id="rule-maxlength" class="input-mini" validate="{digits:true}" value="" /></td>
                            </tr>
                            <tr>
                                <th>最小值：</th>
                                <td><input type="text" name="rule[min]" class="input-mini" value="" /></td>
                                <th>最大值：</th>
                                <td><input type="text" name="rule[max]" class="input-mini" value="" /></td>
                            </tr>
                            <tr>
                                <td colspan="3"><input type="text" id="rule-regexp" name="rule[regexp]" value=""  validate="{regexp:/^\/.+\/$/}" placeholder="自定义验证规则" /></td>
                                <th><select id="regexp-select" class="input-small">
                                        <option value="">请选择</option>
                                        {foreach from="$data.validate_rule" value="$rule"}
                                        <option value="{$rule.regexp}">{$rule.title}</option>
                                        {/foreach}
                                    </select></th>
                            </tr>
                        </table>
                        <p class="help-block">自定义验证正则时可以修改正则表达式</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="width">前台显示</label>
                    <div class="controls">
                        <div class="input-append">
                            宽：<input type="text" name="width" id="width" class="input-min" value="" /><span class="add-on">px</span>
                        </div>
                        <p></p>
                        <div class="input-append">
                            高：<input type="text" name="height" class="input-min" value="" /><span class="add-on">px</span>
                        </div>
                        <p class="help-block"></p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="html_attr">附加HTML标签属性</label>
                    <div class="controls">
                        <textarea class="input-xlarge" id="html_attr" name="html_attr" cols="35" rows="3"></textarea>
                        <p class="help-block">例如：id="girl",class="boy",style……</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="js_event">JS事件</label>
                    <div class="controls">
                        <textarea class="input-xlarge" id="js_event" name="js_event" cols="35" rows="3"></textarea>
                        <p class="help-block">例如：onclick="javascript:alert('Beyond');return false;"</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="field_tips">字段提示</label>
                    <div class="controls">
                        <textarea class="input-xlarge" id="field_tips" name="field_tips" cols="35" rows="3"></textarea>
                        <p class="help-block">显示在字段别名附近作为表单输入提示</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="error_tips">错误描述</label>
                    <div class="controls">
                        <textarea class="input-xlarge" id="error_tips" name="error_tips" cols="35" rows="3"></textarea>
                        <p class="help-block">当字段验证没有通过时友好的错误提示信息</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="join_in">加入搜索</label>
                    <div class="controls">
                        <label class="radio inline" for="join_in">
                            <input type="radio" class="radio" id="join_in" value="1" name="join_index" />加入</label>
                        <label class="radio inline">
                            <input type="radio" class="radio" id="join_out" checked="checked"  value="0" name="join_index"/>不加入
                        </label>
                        <p class="help-block">使用索引可快速访问数据库表中的特定信息。</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">显示字段</label>
                    <div class="controls">
                        <label class="radio inline">
                            <input type="radio" class="radio" value="1" name="state" checked="checked" />显示</label>
                        <label class="radio inline">
                            <input type="radio" class="radio" value="0" name="state" />不显示</td></label>
                        <p class="help-block">是否在前台显示该字段。</p>
                    </div>
                </div>
                <div class="form-actions">
                    <input type="hidden" name="dmid" value="{$hd.get.dmid}" />
                    <input type="hidden" name="table_name" value="{$hd.get.tableName}" />
                    <input type="submit" value="添加字段" name="addField" class="btn btn-primary" />
                    <a href="__CONTROL__/fieldList/dmid/{$hd.get.dmid}/tableName/{$hd.get.tableName}" class="btn">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    <script>
        $('.'+$('#field_type').val()+'_set').show();
        $('.'+$('#field_type').val()+'_set :input').attr('disabled',false);
        $('.'+$('#field_type').val()+'_set_no').hide();
        $('.'+$('#field_type').val()+'_set_no :input').attr('disabled',true);
        $("#field_type").change(function(){
            var fileld_tyle=$(this).val();
            var fileld_setting=$(this).val();
            //有些字段类型不需要显示某些信息，故隐藏+禁用,如SET
            if($("."+fileld_setting+'_set_no')[0]){
                $('.'+fileld_setting+'_set_no').hide();
                $('.'+fileld_setting+'_set_no :input').attr('disabled',true);
            }else{
                $("[class*=_set_no]").show();
                $("[class*=_set_no] :input").attr('disabled',false);
            }
            //隐藏所有的设置区域
            $("[class$='_set']").hide();
            $("[class$='_set'] :input").attr('disabled',true);
            //显示该字段类型的设置区域
            $("."+fileld_setting+"_set").show();
            $("."+fileld_setting+"_set :input").attr('disabled',false);
            //设置选项类型为无符号，有符号
            $("#switch-field").change(function(){
                if($(this).val()!='VARCHAR'){
                    $(this).next().hide();
                    $(':input',$(this).next()).attr('disabled',true);
                    $(':input',$('#switch-unsigned')).attr('disabled',false);
                    $('#switch-unsigned').show();
                }else{
                    $(this).next().show();
                    $(':input',$(this).next()).attr('disabled',false);
                    $(':input',$('#switch-unsigned')).attr('disabled',true);
                    $('#switch-unsigned').hide();
                }
            });
            //如果是字段类型为INT，则选中验证规则中的数字
            if(fileld_tyle=='input_int'){
                $("input[name='rule[number]']").attr('checked',true);
            }else{
                $("input[name='rule[number]']").attr('checked',false);
            }
        });
        
        //正则选择区域
        $("#regexp-select").change(function(){
            $("#rule-regexp").val($(this).val());
        });
    </script>
</body>
</html>